<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <!--    项目进度-->
        <el-card body-style="width: 100%;" shadow="never"
                 style="border: none; "
        >
          <div slot="header" class="clearfix">
            <span class="card-title">项目进度</span>
          </div>
          <div class="chart-wrapper">
            <el-table
              :data="projectProcessData"
              max-height="360px"
            >
              <el-table-column
                label="承租人"
                prop="clientName"
                width="250"
              >
              </el-table-column>
              <el-table-column
                label="租赁方式"
                prop="projectLeaseType"
              >
              </el-table-column>
              <el-table-column
                label="租赁金额"
                prop="projectMoney"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.projectMoney }}元</div>
                </template>
              </el-table-column>
              <el-table-column
                label="主办"
                prop="mainManager"
              >
              </el-table-column>
              <el-table-column
                label="项目阶段"
                prop="stage"
              >
              </el-table-column>
              <el-table-column
                label="租金计划"
                prop="rentPlanDate"
              >
              </el-table-column>
              <el-table-column
                label="下次检查"
                prop="nextCheck"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!--    租金回收情况-->
        <el-card body-style="width: 100%;" shadow="never"
                 style="margin-top: 20px"
        >
          <div slot="header" class="clearfix">
            <span class="card-title">租金回收情况</span>
            <div style="float: right;">
              <el-link style="margin-left: 10px;" type="primary" @click="changeFilterType('1')">本月</el-link>
              <el-link style="margin-left: 10px;" type="primary" @click="changeFilterType('2')">近三月</el-link>
              <el-link style="margin-left: 10px;" type="primary" @click="changeFilterType('3')">本年</el-link>
            </div>
          </div>
          <div class="chart-wrapper">
            <el-table
              :data="rentReceivePlanData"
              max-height="360px"
            >
              <el-table-column
                label="合同编号"
                prop="contractNo"
                width="180"
              >
              </el-table-column>
              <el-table-column
                label="承租人"
                prop="clientName"
              >
              </el-table-column>
              <el-table-column
                label="放款金额"
                prop="amount"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.amount }}元</div>
                </template>
              </el-table-column>
              <el-table-column
                label="放款日期"
                prop="paymentDate"
                width="120"
              >
              </el-table-column>
              <el-table-column
                label="期数"
                prop="issue"
                width="50"
              >
              </el-table-column>
              <el-table-column
                label="应收日期"
                prop="gatherDate"
                width="120"
              >
              </el-table-column>
              <el-table-column
                label="当期租金额"
                prop="rent"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="实收日期"
                prop="actualDate"
                width="120"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!--    待办流程-->
        <el-card body-style="width: 100%; height:390px" shadow="never">
          <div slot="header" class="clearfix">
            <span class="card-title">待办流程</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="this.getProcessList">刷新</el-button>
          </div>
          <div class="chart-wrapper" style="overflow: auto">
            <div class="process-list">
              <div v-for="(item, index) in processList" :key="index" class="list-column">
                <svg-icon class-name="custom-class" icon-class="clipboard"/>
                <div class="list-col-main">
                  <div class="text">
                    <span class="name">{{ item.owner }}</span>
                    <span>发起</span>
                    <el-link type="primary" @click="processClickHandler(item)">{{ item.title }}</el-link>
                  </div>
                  <div class="time">{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card body-style="width: 100%; height: 360px;" shadow="never" style="margin-top: 20px"
        >
          <div slot="header" class="clearfix">
            <span class="card-title">消息中心</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="this.getMessageList">刷新</el-button>
          </div>
          <div class="chart-wrapper">
            <el-empty v-if="messageList.length == 0" :image-size="100" description="暂无消息通知"></el-empty>
            <div v-else class="chart-wrapper">
              <div class="process-list">
                <div v-for="(item, index) in messageList" :key="index" class="list-column">
                  <svg-icon class-name="custom-class" icon-class="clipboard"/>
                  <div class="list-col-main">
                    <div class="text">
                      <span class="name">{{ item.createTime }}</span>
                      <span>收到</span>
                      <el-popover
                        :content="item.content"
                        :title="item.title"
                        placement="top"
                        trigger="click"
                        width="200"
                      >
                        <el-link slot="reference" type="primary">{{ item.title }}</el-link>
                      </el-popover>
                    </div>

                    <el-link slot="reference" type="primary" @click="messageClickHandler(item)">去处理</el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <!--    资产五级分类-->
        <el-card body-style="width: 100%;" shadow="never" style="margin-top: 20px; margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <span class="card-title">资产五级分类</span>
          </div>
          <div class="chart-wrapper">
            <div class="process-list">
              <show-pie></show-pie>
            </div>
          </div>
          <Hello :name="name"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Bar from '@/components/Charts/Bar.vue'
// import Pie from '@/components/Charts/Pie.vue'
import StackedBar from '@/components/Charts/StackedBar.vue'
import { listMessageToMeUnRead, listTodo, messageMarkRead } from '../api/rydemo/personal/base'

export default {
  name: 'Index',
  components: {
    Bar,
    StackedBar
  },
  data() {
    return {
      //项目进度信息
      projectProcessData: [],
      //租金回收计划
      rentReceivePlanData: [],
      //资产五级分类
      assetFiveClassesData: [],
      //待办任务
      processList: [],
      //消息
      messageList: [],
      // 查询参数
      queryParam: {
        filterType: '1'
      },
      name: '张三'
    }
  },
  created() {
    this.getProcessList()
    this.getMessageList()
    this.init()
  },
  methods: {
    init() {
      listProjectSchedule().then(res => {
        if (res && res.code === 200) {
          this.projectProcessData = res.rows
          console.log(this.projectProcessData)
        }
      })

      listRentRecycling(this.queryParam).then(res => {
        if (res && res.code === 200) {
          this.rentReceivePlanData = res.rows
        }
      })
    },
    //获取待办列表
    getProcessList() {
      listTodo({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        if (res && res.code === 200) {
          this.processList = res.rows
        }
      })
    },
    //获取消息列表
    getMessageList() {
      listMessageToMeUnRead().then(res => {
        if (res && res.code === 200) {
          this.messageList = res.rows
          console.log(this.messageList)
        }
      })
    },
    handleSetLineChartData(type) {
    },
    // 切换租金回收情况年份筛选
    changeFilterType(type) {
      this.queryParam.filterType = type
      listRentRecycling(this.queryParam).then(res => {
        if (res && res.code === 200) {
          this.rentReceivePlanData = res.rows
        }
      })
    },
    //待办点击处理逻辑
    processClickHandler(item) {
      console.log(item)
      this.$router.push(item.url)
    },
    //消息点击处理逻辑
    messageClickHandler(item) {
      this.$router.push(item.componentPath)
      //标记已读
      messageMarkRead(item.id).then(res => {
        if (res && res.code === 200) {
          this.getMessageList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  min-width: 900px;
  width: 100%;
  padding: 20px;
  background: #f0f2f5;

  .card-title {
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
  }

  .chart-wrapper {
    width: 100%;
    height: 100%;

    .process-list {
      .list-column {
        padding: 18px 0 12px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        color: #909399;

        &:last-child {
          border-bottom: none;
        }

        .custom-class {
          margin: 0 12px;
          font-size: 20px;
        }

        .list-col-main {
          margin-left: 10px;
          line-height: 14px;
          font-size: 14px;

          .text {
            margin-bottom: 18px;

            span {
              margin-right: 12px;
            }

            .name {
              color: #606266
            }

            .link {
              color: #1890ff;
              cursor: pointer;

              &:hover {
                color: #46a6ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
